<template>
  <div class="bi-tabs-container">
    <!-- eslint-disable -->
    <Tabs
      :class="[
        props.componentStyle.labelStyle === 'border-card'
          ? 'is-round-card'
          : '',
      ]"
      v-model:active="activeKey"
      :type="type"
      ref="tabs"
      :key="tabsKey"
    >
      <!-- eslint-enable -->
      <Tab
        v-for="pane in _panes"
        :title="pane.label"
        :name="pane.key"
        :key="pane.key"
      >
        <div :class="nsTabPaneContainer.b()">
          <div
            v-if="currentLayouts === null"
            :class="[nsEmpty.b(), 'vessel']"
          ></div>
          <component
            v-else
            :is="props.layoutItemSet[currentLayouts.component] || 'div'"
            :class="['dragIgnoreFromClassName']"
            v-bind="currentLayouts.componentProps"
            :id="currentLayouts.id"
            :layoutItemSet="props.layoutItemSet"
            :layoutBasicSettings="props.layoutBasicSettings"
            :widget="currentLayouts"
            :areaId="props.areaId"
          />
        </div>
      </Tab>
    </Tabs>
  </div>
</template>

<script setup>
import { nanoid } from "nanoid";
import { computed, defineProps, ref, onMounted, watch } from "vue";
import { useNamespace } from "@mdfe/medi-ui";
import { cloneDeep } from "lodash";
import { Tabs, Tab } from "@mdfe/vant";

defineOptions({
  name: "layout-tabs",
});

const tabsKey = ref(Math.floor(Math.random() * 10000) + 10); // 强制刷新的key

const props = defineProps({
  layoutType: {
    // 布局类型
    type: String,
    default: "free", // 默认为自由布局
  },
  layoutBasicSettings: {
    type: Object,
  },
  layoutItemSet: {
    type: Object,
  },
  componentStyle: {
    type: Object,
    default: () => {
      return {
        labelItems: [{ name: "Tab1" }, { name: "Tab2" }],
        labelStyle: "default",
        titleName: "标题",
        titleShow: true,
        titleSize: "16",
      };
    },
  },
  widget: {
    // 组件实例
    type: Object,
    default: () => {},
  },
  options: {
    // 存储属性相关数据
    type: Object,
    default: () => {},
  },
  areaId: {
    // 布局ID，如果为空说明是自由布局
    type: String,
    default: "",
  },
});

// 存储的属性设置
const componentProps = computed(() => props.widget.componentProps);
const type = computed(() => {
  if (props.componentStyle.labelStyle === "default") {
    return "line";
  } else if (props.componentStyle.labelStyle === "card") {
    return "card";
  } else if (props.componentStyle.labelStyle === "border-card") {
    return "line";
  }
  return "line";
});

const nsTabPaneContainer = useNamespace("TabPaneContainer");
const nsEmpty = useNamespace("empty");
const nsComponentMask = useNamespace("component-mask");

const _panes = ref([
  {
    label: "Tab1",
    key: nanoid(),
    content: "",
    disabled: true,
    closable: false,
  },
  {
    label: "Tab2",
    key: nanoid(),
    content: "",
    disabled: true,
    closable: true,
  },
]);
const activeKey = ref(_panes.value[0].key);
// 当前tab内部有没有组件
const currentLayouts = computed(() => {
  const activePanes = _panes.value.find((item) => item.key === activeKey.value);
  if (activePanes.content) return activePanes.content;
  return null;
});
console.log("currentLayouts", currentLayouts.value);

watch(
  () => props.componentStyle?.labelItems,
  (newItems) => {
    // 比对标签页
    const panes = cloneDeep(_panes.value);
    _panes.value = [];
    _panes.value = newItems.map((item) => {
      const target = panes.find((pane) => pane.label === item.name);
      if (target) return target;
      return {
        label: item.name,
        key: nanoid(),
        content: "",
        disabled: true,
      };
    });
    if (panes.length === _panes.value.length) {
      // 数组长度没有发生变化则强制组件重新喧嚷
      tabsKey.value++;
    }
  }
);
</script>

<style lang="scss" scoped>
// @import '@mdfe/sass-bem/bem';

// @include c('TabPaneContainer') {
//   height: 100%;
//   background: rgba($color: #f5f5f5, $alpha: 0.4);
// }
// @include c('empty') {
//   height: 100%;
//   width: 100%;

//   &::before {
//     content: '拖拽组件到这里';
//     left: 0;
//     top: 0;
//     font-size: 14px;
//     color: #999;
//   }
// }

// @include c('component-mask') {
//   position: absolute;
//   top: 0%;
//   left: 0%;
//   width: 100%;
//   height: 100%;
//   background: #999;
//   opacity: 0;
//   z-index: 1;
// }

// .bi-tabs-container {
//   display: flex;
//   flex-direction: column;
//   height: 100%;
//   .bi-tabs-tab {
//     background: unset;
//     flex: 1;
//     display: flex;
//     flex-direction: column;
//     ::v-deep {
//       .#{$md-prefix}-tabs__content {
//         flex: 1;
//         padding: var(--md-spacing-3);
//         box-sizing: border-box;
//       }
//     }
//     ::v-deep {
//       .#{$md-prefix}-tabs__item {
//         font-size: var(--bi-tab-font-size);
//         font-family: var(--bi-tab-font-family);
//         font-weight: var(--bi-tab-text-bold);
//         font-style: var(--bi-tab-text-italic);
//         text-decoration: var(--bi-tab-text-underline);
//         text-decoration-line: var(--bi-tab-text-lineThrough);
//         color: var(--bi-tab-default-color);
//         &.is-active {
//           color: var(--bi-tab-active-color);
//         }
//       }
//       @include c('tab-pane') {
//         overflow-y: auto;
//       }
//     }
//   }

//   ::v-deep {
//     .#{$md-prefix}-tabs--border-card > .#{$md-prefix}-tabs__header,
//     .#{$md-prefix}-tabs--card > .#{$md-prefix}-tabs__header {
//       background-color: transparent;
//     }
//   }

//   .highlight-tab-key-in-move {
//     outline: 1px dashed;
//     outline-color: rgb(var(--md-color-6));
//   }
// }
</style>
